<template>
	<view class="">
		<view class="topnav u-flex u-col-center u-row-center" :style="topnav" :class="{ Custom: !fixedTop }">
			<view :class="['left', 'u-flex', 'u-col-center', '', noTitle ? '' : 'w']" v-if="noBack"><slot name="left"></slot></view>
			<view v-else :class="['left', 'u-flex', 'u-col-center', '', noTitle ? '' : 'w']" @tap="BackPage">
				<view class="back-btn u-flex" :class="[noTitle ? '' : 'w']"><u-icon name="arrow-left" size="40" :color="color"></u-icon></view>
			</view>
			<view :class="['center', 'u-flex-sub', '', noTitle ? '' : 'u-flex-xy-center']">
				<slot name="center" v-if="noTitle"></slot>
				<block v-else>
					<image class="logo" mode="aspectFit" :src="imgTitleUrl" v-if="imgTitleUrl"></image>
					<text class="" :style="{ color: color }" v-else>{{ title }}</text>
				</block>
			</view>
			<view class="u-flex u-col-center u-row-right" v-if="noTitle && mpShowRight"><slot name="right"></slot></view>
			<view class="w"></view>
		</view>
		<view class="" :style="topnavHeight" v-if="!noHoldHeight"></view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	name: 'zxNav',
	data: function () {
		return {};
	},
	props: {
		fixedTop: {
			type: Boolean,
			default: !0
		},
		noTitle: {
			type: Boolean,
			default: !1
		},
		title: {
			type: String,
			default: ''
		},
		imgTitleUrl: {
			type: String,
			default: ''
		},
		noBack: {
			type: Boolean,
			default: !1
		},
		backCustom: {
			type: Boolean,
			default: !1
		},
		bg: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#333333'
		},
		noHoldHeight: {
			type: Boolean,
			default: !1
		},
		mpShowRight: {
			type: Boolean,
			default: !1
		},
		action: {
			type: Boolean,
			default: !0
		},
		zIndex: {
			type: [String, Number],
			default: 2e5
		}
	},
	computed: {
		...mapState(['CustomBar', 'StatusBar']),
		topnav: function () {
			if (this.CustomBar) {
				return 'height:'
					.concat(this.CustomBar, 'px;padding-top:')
					.concat(this.StatusBar, 'px;background-color:')
					.concat(this.bg, ';color:')
					.concat(this.color, ';z-index:')
					.concat(this.zIndex);
			}
			var t = this.getSysBar();
			return 'height:'
				.concat(t.navBar, 'px;padding-top:')
				.concat(t.statusBar, 'px;background-color:')
				.concat(this.bg, ';color:')
				.concat(this.color, ';z-index:')
				.concat(this.zIndex);
		},
		topnavHeight: function () {
			if (this.CustomBar) return 'height:'.concat(this.CustomBar, 'px;padding-top:').concat(this.StatusBar, 'px;');
			var t = this.getSysBar();

			return console.log(t), 'height:'.concat(t.navBar, 'px;padding-top:').concat(t.statusBar, 'px;');
		}
	},
	methods: {
		...mapMutations(['SET_CustomBar', 'SET_StatusBar']),
		BackPage: function () {
			if (this.action) {
				var t = getCurrentPages(),
					n = this.backCustom ? t.length : 1;
				//uni.$u.BackPage(n);
				if (getCurrentPages().length <= 1) {
					this.$Router.replaceAll({
						name: 'index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			} else this.$emit('backpage');
		},
		getSysBar: function () {
			var n = uni.getSystemInfoSync();
			let navBar = 'ios' == n.platform ? 44 + n.statusBarHeight : 48 + n.statusBarHeight;
			this.SET_CustomBar(navBar);
			this.SET_StatusBar(n.statusBarHeight);
			return {
				navBar,
				statusBar: n.statusBarHeight
			};
		}
	}
};
</script>

<style>
.topnav {
	left: 0;
	padding-left: 28upx;
	padding-right: 28upx;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 200000;
}
.Custom {
	position: relative;
}
.topnav .center {
	font-size: 32upx;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 500;
}

.topnav .w {
	width: 88px;
}

.topnav .logo {
	height: 22px;
	width: 180px;
}

.fanhui {
	font-size: 24px;
}

.mr8-px {
	margin-right: 8px;
}

.back-btn {
	height: 80rpx;
	line-height: 80rpx;
	/* width: 80rpx; */
}
</style>
